<template>
  <div class="page">
    <div class="head">
      <h1>猴毛转换</h1>
    </div>
    <div class="panel" v-if="balance">
      <h2>转换方式</h2>
      <div class="balance" :class="{'reverse': direction == 1}">
        <div class="hair">
          <h3>道具猴毛</h3>
          <span>余额：{{ balance.monkeyBalance }}</span>
        </div>
        <div class="transfer" :class="{'refresh': rotated}" @click="rotate()"></div>
        <div class="hair">
          <h3>余额猴毛</h3>
          <span>余额：{{ balance.coinBalance }}</span>
        </div>
      </div>
      <h2>转换数量</h2>
      <group gutter="10px" class="hair-num">
        <x-input v-model="num" type="number"></x-input>
      </group>
      <help class="help">
        <div>
          <p>*猴毛转换功能可以将从链克服迁移过来的道具猴毛与猴毛账户余额进行互相转换，转换成余额猴毛就可以使用猴毛进行购买小猴、生育、道具商城购买道具等操作，余额猴毛转化成道具猴毛就可以通过道具迁移工具将猴毛迁移至链克服中，进行链克服游戏及链克服道具使用，转换没有手续费，立即生效</p>
        </div>
      </help>
    </div>
    <box gap="20px 12px">
      <x-button type="primary" @click.native="transfer()">确认转换</x-button>
    </box>
  </div>
</template>

<script>
  import {
    XInput,
    Group,
    Box,
    XButton
  } from 'vux'
  import Help from './common/help.vue'
  export default {
    components: {
      XInput,
      Group,
      Box,
      XButton,
      Help
    },
    data() {
      return {
        balance: null,
        rotated: false,
        direction: 2,
        num: null
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.getBalance();
      });
    },
    methods: {
      getBalance() {
        this.$http
          .get(`/game/myBalance`)
          .then(res => {
            if (res.code == 200) {
              this.balance = res.result
            } else {}
          })
          .catch(function(error) {});
      },
      transfer() {
        this.$http
          .post(`/common/monkeyTokenConvert`, {
            amount: this.num,
            direction: this.direction
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.getBalance()
            } else {}
          })
          .catch(function(error) {});
      },
      rotate() {
        if (this.direction == 1) {
          this.direction = 2
        } else {
          this.direction = 1
        }
        this.rotated = true
        setTimeout(() => {
          this.rotated = false
        }, 500);
      }
    },
  }
</script>

<style lang="scss" scoped>
  .panel {
    h2 {
      color: #e78171;
      font-size: 16px;
    }
  }
  .balance {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 0;
    &.reverse {
      flex-direction: row-reverse;
    }
    span {
      font-size: 12px;
      color: $gray;
    }
    .transfer {
      width: 40px;
      height: 40px;
      background: url(/static/exchange.svg) 50% no-repeat;
      background-size: contain;
      &.refresh {
        animation: rotating .5s linear;
      }
    }
  }
</style>

<style lang="scss">
  @keyframes rotating {
    from {
      transform: rotate(0)
    }
    to {
      transform: rotate(360deg)
    }
  }
  .hair-num {
    .weui-cells {
      &:before,
      &:after {
        display: none;
      }
    }
    .weui-cell {
      border: 1px solid #ececec;
      padding: 5px 10px;
    }
  }
</style>

